<template>
	<ToolbarItemContainer ref="container" :iconFile="evaluateIcon" title="咨询订单" :needBottomPopup="true"
		:iconWidth="isUniFrameWork ? '26px' : '20px'" :iconHeight="isUniFrameWork ? '26px' : '20px'"
		@onDialogShow="onDialogShow" @onDialogClose="onDialogClose">
      <view class="orders-container">
				<view class="order-tab">
					<view 
					v-for="(item, index) in tabData.list"
					:key="index"
					@click="jumpTab(item, index)"
					:class="index === tabData.tabIndex ? 'tab-item tab-item-active' : 'tab-item'">{{ item.text }}</view>
				</view>
				<scrollView
				 class='scroll'
				 :scrollBoolean="listData.total" 
				 :scrollTop="listData.scrollTop"
				 :scrollLoad="listData.total > listData.list.length" 
				 :refresherRriggered="listData.refresherRriggered"
				 @refresherrefresh="refresherrefresh" 
				 @scrolltolower="scrolltolower">
					<view class="order-list">
						<view class="list-item"
						 v-for="(item, index) in listData.list">
							<view class="item-top">
								<view class="top-left">{{ item.positionName }}</view>
								<view class="top-time">{{ item.createTime }}</view>
							</view>
							<view class="item-bt">
								<view class="bt-btn" @click="submitEvaluate(item)">发送</view>
							</view>
						</view>
					</view>
				</scrollView>
			</view>
	</ToolbarItemContainer>
</template>
<script setup lang="ts">
	import TUIChatEngine, {
		TUITranslateService,
		TUIStore,
		StoreName,
		IConversationModel,
		TUIChatService,
		SendMessageParams,
		SendMessageOptions,
	} from '@tencentcloud/chat-uikit-engine';
	import { ICustomMessagePayload } from '../../../../interface';
	import { ref, computed, reactive, onMounted } from '../../../../adapter-vue';
	import ToolbarItemContainer from '../toolbar-item-container/index.vue';
	import evaluateIconLight from '../../../../assets/icon/evalute-light.svg';
	import evaluateIconDark from '../../../../assets/icon/evalute-dark.svg';
	import pay from '../../../../assets/icon/zx.svg';
	import Link from '../../../../utils/documentLink';
	import Icon from '../../../common/Icon.vue';
	import starIcon from '../../../../assets/icon/star.png';
	import starLightIcon from '../../../../assets/icon/star-light.png';
	import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
	import { isPC, isH5, isUniFrameWork } from '../../../../utils/env';
	import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
	import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
	import TUIChatConfig from '../../config';
	import { onLoad, onUnload } from '@dcloudio/uni-app';
	import scrollView from '@/components/scrollView.vue';
	import api from '@/utils/api/recruit.js'
	// onLoad(res => {
	
	// })
	onMounted(_ => {
		getList()
	})
	const isCustom = ref<ICustomMessagePayload>({
		businessID: '',
	});
	const tabData = reactive({
		list: [
			{ text:'招聘者订单', value: 'BOSS' },
			{ text:'服务者订单', value: 'EMP' },
		],
		tabIndex: 0
	})
	const options = ref([
		{ value: 0, text: '视频剪辑师' },
		{ value: 12, text: '调音师' },
		{ value: 11, text: '调音师' },
		{ value: 11232, text: '调音师' },
		{ value: 1132, text: '调音师' },
		{ value: 1123, text: '调音师' },
		{ value: 1231, text: '调音师' },
		{ value: 1231, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 11232, text: '调音师' },
		{ value: 1132, text: '调音师' },
		{ value: 1123, text: '调音师' },
		{ value: 1231, text: '调音师' },
		{ value: 1231, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
	])
	// 点击类型
	const jumpTab = (item, index) => {
		tabData.tabIndex = index
		listData.pageInfo.queryType = item.value
		listData.list = [];
		listData.pageInfo.pageNo = 1
		listData.pageInfo.pageSize = 10 
		getList();
	}
	const isChoose = ref(false)
	const isChooseTo = () => {
		isChoose.value = true
	}
	const zhiye=ref('')
	const chooseIndex = ref(0)
	const toChoose = (index : number) => {
		chooseIndex.value = index
		selectedOptionValue.value = options.value[chooseIndex.value].text
		isChoose.value = false
	}
	const price = ref()
	const num = ref()
	const typeList = ref(['单结', '日结', '月结'])
	const jieIndex = ref(0)
	const toChange = (index : number) => {
		jieIndex.value = index
	}
	const selectedOptionValue = ref('')
	// const potionChange = (event:Event) => {
	// 	console.log(event.target.value)
	// 	uni.showModal({
	// 		title:'职业',
	// 		content: `${event.target.value}`
	// 	})
	// }
	const evaluateIcon = pay;
	const props = defineProps({
		starTotal: {
			type: Number,
			default: 5,
		},
	});
	const emits = defineEmits(['onDialogPopupShowOrHide']);

	const container = ref();

	const starList = ref<number>(props.starTotal);
	const currentStarIndex = ref<number>(-1);
	const comment = ref('');
	const currentConversation = ref<IConversationModel>();

	TUIStore.watch(StoreName.CONV, {
		currentConversation: (conversation : IConversationModel) => {
			currentConversation.value = conversation;
		},
	});

	const isEvaluateValid = computed(() => comment.value.length || currentStarIndex.value >= 0);

	const onDialogShow = () => {
		emits('onDialogPopupShowOrHide', true);
	};

	const onDialogClose = () => {
		resetEvaluate();
		emits('onDialogPopupShowOrHide', false);
	};

	const openLink = () => {
		if (isPC || isH5) {
			window.open(Link?.customMessage?.url);
		}
	};

	const closeDialog = () => {
		container?.value?.toggleDialogDisplay(false);
	};

	const resetEvaluate = () => {
		currentStarIndex.value = -1;
		comment.value = '';
	};

	const selectStar = (starIndex ?: any) => {
		if (currentStarIndex.value === starIndex) {
			currentStarIndex.value = currentStarIndex.value - 1;
		} else {
			currentStarIndex.value = starIndex;
		}
	};
// 列表数据
const listData = reactive({
	total: 0, //	总条数
	scrollTop: 0, //	滚动区域
	refresherRriggered: false, //	下拉状态
	pageInfo: { pageNo: 1, pageSize: 10, queryType: 'BOSS' },
	list: []
})
// 刷新
const refresherrefresh = _ => {
	listData.refresherRriggered = true;
	listData.list = [];
	listData.pageInfo.pageNo = 1
	listData.pageInfo.pageSize = 10 
	getList();
}
// 触底事件
const scrolltolower = _ => {
	if (listData.list.length >= listData.total) return false;
		listData.pageInfo.pageNo++;
		getList();	
}
// 获取列表
const getList = async _ => {
	const res = await api.queryAppWorkOrder(listData.pageInfo)
	listData.list = listData.list.concat(res.data.list);
	listData.total = res.data.total;
	listData.refresherRriggered = false;
}
	const submitEvaluate = (item) => {
		// The evaluate message must have at least one star or comment to be submitted.
		// if (currentStarIndex.value < 0 && !comment.value.length) {
		// 	return;
		// }
		const payload = {
			data: JSON.stringify({
				businessID: 'seek',
				requireSkill: item.requireSkill,
				positionName: item.positionName,
				positionId: item.positionId,
			})
		};
		const options = {
			to:
				currentConversation?.value?.groupProfile?.groupID
				|| currentConversation?.value?.userProfile?.userID,
			conversationType: currentConversation?.value?.type,
			payload,
			needReadReceipt: isEnabledMessageReadReceiptGlobal(),
		};
		const offlinePushInfoCreateParams : IOfflinePushInfoCreateParams = {
			conversation: currentConversation.value,
			payload: options.payload,
			messageType: TUIChatEngine.TYPES.MSG_CUSTOM,
		};
		const sendMessageOptions : SendMessageOptions = {
			offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
		};
		TUIChatService.sendCustomMessage(options as SendMessageParams, sendMessageOptions);
		// close dialog after submit evaluate
		container?.value?.toggleDialogDisplay(false);
	};
</script>
<style scoped lang="scss">
.orders-container{
	width: 100%;
	height: 95vh;
	overflow: hidden;
	background: #F4F6FA;
	padding: 20rpx 24rpx;
	box-sizing: border-box;
	.order-tab{
		display: flex;
		align-items: center;
		.tab-item{
			color: #595959;
			font-size: 26rpx;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			margin-right: 20rpx;
		}
		.tab-item-active{
			color: #6B64D3;
			position: relative;
		}
		.tab-item-active:before{
			position: absolute;
			content: '';
			width: 60rpx;
			height: 3rpx;
			background: #6B64D3;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}
	}
	.scroll{
		height: calc(100% - 40rpx);
		.order-list{
			height: 100%;
			.list-item{
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 24rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				.item-top{
					.top-left{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 32rpx;
						color: #262626;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-bottom: 16rpx;
					}
					.top-time{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #595959;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}
				.item-bt{

					.bt-btn{
						padding: 6rpx 12rpx;
						background: #6B64D3;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 1rpx solid #6B64D3;
						font-weight: normal;
						font-size: 26rpx;
						color: #fff;
					}
				}
			}
		}
	}
}	
	
</style>